﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="materialContainer">
	<div class="box" id="loginDiv">
		<div class="title">登录</div>
		<div class="input">
			<label for="name">用户名</label>
			<input v-model="user.name" type="text" name="name" id="name" >
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="pass">密码</label>
			<input v-model="user.password" type="password" name="pass" id="pass">
			<span class="spin"></span>
		</div>
		<div class="button login">
			<button @click="login">
				<span>登录</span>
				<i class="fa fa-check"></i>
			</button>
		</div>
		<a href="javascript:" class="pass-forgot">忘记密码？</a>
	</div>

	<div class="overbox" id="registerDiv">
		<div class="material-button alt-2">
			<span class="shape"></span>
		</div>
		<div class="title">注册</div>
		<div class="input">
			<label for="regname">用户名</label>
			<input v-model="user.name" type="text" name="regname" id="regname">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="regpass">密码</label>
			<input v-model="user.password" type="password" name="regpass" id="regpass">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="reregpass">确认密码</label>
			<input v-model="user.repeatpassword" type="password" name="reregpass" id="reregpass">
			<span class="spin"></span>
		</div>
		<div class="button">
			<button @click="register">
				<span>注册</span>
			</button>
		</div>
	</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/vue/vue.min.js"></script>
<script src="js/axios/axios.min.js"></script>
<script>

    $(function(){
        var dataForLogin = {
            uri:'forelogin',
            result: [],
            user:{name:'', password:''}
        };
        //ViewModel
        var login = new Vue({
            el: '#loginDiv',
            data: dataForLogin,
            mounted:function(){
                linkDefaultActions();
            },
            methods: {
                login:function(){
                    var url =  this.uri;
                    if(0==this.user.name.length){
                        alert("请输入用户名");
                        return;
                    }
                    if(0==this.user.password.length){
                        alert("请输入密码");
                        return;
                    }

                    axios.post(url,this.user).then(function(response) {
                        var result = response.data;
                        if(result.code==0){
                            //location.href="home";
                            alert("登录成功");
                            login.user={name:'', password:''};
                        }
                        else{
                            alert("登录失败");
                        }
                    });
                }
            }
        });
        var dataForRegist={
            uri:'foreregister',
            result:[],
            user:{name:'',password:'',repeatpassword:''}
        };
        var regist=new Vue({
            el:'#registerDiv',
            data:dataForRegist,
            mounted:function () {
                linkDefaultActions();
            },
            methods:{
                register:function () {
                    var url=this.uri;
                    if(this.user.name.length==0){
                        alert("请输入用户名");
                        return;
                    }
                    var url=this.uri;
                    if(this.user.password.length==0){
                        alert("请输入密码");
                        return;
                    }
                    var url=this.uri;
                    if(this.user.repeatpassword.length==0){
                        alert("请输入重复密码");
                        return;
                    }
                    var url=this.uri;
                    if(this.user.password!=this.user.repeatpassword){
                        alert("密码不一致");
                        return;
                    }
                    axios.post(url,this.user).then(function (response) {
                        var result=response.data;
                        if(result.code==0){
                            //location.href="registerSuccess";
                            alert("注册成功");
                            regist.user={name:'',password:'',repeatpassword:''}
                        }
                        else{
                            alert("注册失败");
                        }
                    })
                }
            }
        });
    })
    function linkDefaultActions() {
        $(".input input").focus(function () {

            $(this).parent(".input").each(function () {
                $("label", this).css({
                    "line-height": "18px",
                    "font-size": "18px",
                    "font-weight": "100",
                    "top": "0px"
                })
                $(".spin", this).css({
                    "width": "100%"
                })
            });
        }).blur(function () {
            $(".spin").css({
                "width": "0px"
            })
            if ($(this).val() == "") {
                $(this).parent(".input").each(function () {
                    $("label", this).css({
                        "line-height": "60px",
                        "font-size": "24px",
                        "font-weight": "300",
                        "top": "10px"
                    })
                });

            }
        });

        $(".button").click(function (e) {
            var pX = e.pageX,
                pY = e.pageY,
                oX = parseInt($(this).offset().left),
                oY = parseInt($(this).offset().top);

            $(this).append('<span class="click-efect x-' + oX + ' y-' + oY + '" style="margin-left:' + (pX - oX) + 'px;margin-top:' + (pY - oY) + 'px;"></span>')
            $('.x-' + oX + '.y-' + oY + '').animate({
                "width": "500px",
                "height": "500px",
                "top": "-250px",
                "left": "-250px",

            }, 600);
            $("button", this).addClass('active');
        })

        $(".alt-2").click(function () {
            if (!$(this).hasClass('material-button')) {
                $(".shape").css({
                    "width": "100%",
                    "height": "100%",
                    "transform": "rotate(0deg)"
                })

                setTimeout(function () {
                    $(".overbox").css({
                        "overflow": "initial"
                    })
                }, 600)

                $(this).animate({
                    "width": "140px",
                    "height": "140px"
                }, 500, function () {
                    $(".box").removeClass("back");

                    $(this).removeClass('active')
                });

                $(".overbox .title").fadeOut(300);
                $(".overbox .input").fadeOut(300);
                $(".overbox .button").fadeOut(300);

                $(".alt-2").addClass('material-buton');
            }

        })

        $(".material-button").click(function () {

            if ($(this).hasClass('material-button')) {
                setTimeout(function () {
                    $(".overbox").css({
                        "overflow": "hidden"
                    })
                    $(".box").addClass("back");
                }, 200)
                $(this).addClass('active').animate({
                    "width": "700px",
                    "height": "700px"
                });

                setTimeout(function () {
                    $(".shape").css({
                        "width": "50%",
                        "height": "50%",
                        "transform": "rotate(45deg)"
                    })

                    $(".overbox .title").fadeIn(300);
                    $(".overbox .input").fadeIn(300);
                    $(".overbox .button").fadeIn(300);
                }, 700)

                $(this).removeClass('material-button');

            }

            if ($(".alt-2").hasClass('material-buton')) {
                $(".alt-2").removeClass('material-buton');
                $(".alt-2").addClass('material-button');
            }

        });
    }
</script>
</body>
</html>